Namespace("sketch.ui.iphone");

(function(ui) {
    var fwk = sketch.framework;

    ui.iphone.Toolbar = klass(ui.common.StackPanel, (function() {
        var onPropertyChanged = function(events) {
            for (var i = 0; i < events.length; i++) {
                var event = events[i];
                switch (event.property) {
                    case 'type':
                        if (event.newValue === 'normal') {
                            this._currentResource = this._normalResource;
                        } else if (event.newValue === 'black') {
                            this._currentResource = this._blackResource;
                        } else if (event.newValue === 'bottom') {
                            this._currentResource = this._bottomResource;
                        }
                        break;
                    case "layout":
                        onLayoutChanged.call(this, event.newValue);
                        break;
                }
            }

            this.invalidate();
        };

        var onLayoutChanged = function(newLayout) {
            var that = this;
            this.centerPanel.clear();
            var buttonMargin = new fwk.Box(15, 0, 15, 0);

            var addImageButton = function(src, margin) {
                var button = new ui.iphone.BarItem();
                button.type("transparent");
                button.mode("imageOnly");
                button.margin(margin);
                button.imageSrc(src);
                button.verticalAlignment("center");
                that.centerPanel.add(button);
            };

            switch (newLayout) {
                case "5icons":
                    addImageButton("/img/icons/toolbar/back.png", buttonMargin);
                    addImageButton("/img/icons/toolbar/forward.png", buttonMargin);
                    addImageButton("/img/icons/toolbar/add.png", buttonMargin);
                    addImageButton("/img/icons/toolbar/bookmark.png", buttonMargin);
                    addImageButton("/img/icons/toolbar/page.png", buttonMargin);
                    break;
                case "2iconsAndProgress":
                    addImageButton("/img/icons/toolbar/refresh.png", buttonMargin);
                    var progress = new ui.iphone.Progressbar();
                    progress.verticalAlignment("center");
                    progress.width(200);
                    that.centerPanel.add(progress);
                    addImageButton("/img/icons/toolbar/compose.png", buttonMargin);
                    break;
            }
        };

        return {
            __type__: "ui.iphone.Toolbar",
            _constructor:function() {
                this.properties.propertyChanged.bind(EventHandler(this, onPropertyChanged));
                this.properties.createProperty("type", "Toolbar type", "normal").
                    possibleValues({'normal':'normal', 'black':'black', 'bottom':'bottom'}).useInModel().editorTemplate("#editor-dropdown");

                this.properties.createProperty("layout", "Layout", "empty")
                    .useInModel().editorTemplate("#editor-dropdown")
                    .possibleValues({empty: "Empty", "2iconsAndProgress" : "2 Icons And Progress", "5icons" : "5 Icons"});

                this._normalResource = fwk.Resources['toolbar'];
                this._blackResource = fwk.Resources['toolbar_black'];
                this._bottomResource = fwk.Resources['toolbar_bottom'];
                this.type('normal');
                this.width(ui.iphone.SCREEN_WIDTH);

                this.orientation("vertical");

                this.centerPanel = new ui.common.StackPanel();
                this.centerPanel.orientation("horizontal");
                this.centerPanel.horizontalAlignment("center");
                this.centerPanel.autoWidth(true);
                this.centerPanel.canSelect(false);
                this.properties.height.bind(this.centerPanel.properties.height.bindingPoint);
                ui.iphone.Toolbar.Super.add.call(this, this.centerPanel);
                this.enableGroupLocking(true);
            },
            drawSelf:function(context) {
                var t = this.top(),
                    h = this.height();
                context.save();
                context.fillStyle = this._currentResource.toBrush(context, 0, t, 0, t + h);
                context.fillRect(this.left(), t, this.width(), h);

                context.restore();

                this.SuperKlass.drawSelf.call(this, context);
            },
            canAccept:function(element) {
                return true;
            },
            type:function(value) {
                return this.properties.type(value);
            },
            layout: function(value) {
                return this.properties.layout(value);
            },
            add: function(element) {
                this.centerPanel.add(element);
            },
            remove: function(element) {
                this.centerPanel.remove(element);
            },
            clear: function(){
                this.centerPanel.clear();
            },
            getChildren: function() {
                return this.centerPanel.children;
            }
        };
    })());
})(sketch.ui);